import React from 'react';

import { Route, Switch , Redirect} from 'react-router-dom'
import Header from '../../common/Header'
import News from './news'
import Newsdetail from './news/newsdetail'
import Video from './video'
import Videodetail from './video/videodetail'
import Peopledetail from './people/peopledetail'
import Peoplenews from './people/peoplenews'
import People from './people';
import Search from './search'


//路由懒加载
// const News = lazy(()=>import('./news'))
// const Newsdetail = lazy(()=>import('./news/newsdetail'))

const home = () =>{
    
        return ( 
            <div>
                <Header></Header>
                <Switch>
                     {/* switch嵌套后，匹配到一个就不匹配了 */}

                    {/* <Suspense fallback ={<div>loading</div>}> */}
                    {/* Suspense fallback中的组件为默认显示组件，懒加载的组件未加载出来时显示 */}
                        
                    <Route path = '/main/home/news' exact component = {News}></Route>
                    <Route path = '/main/home/news/detail' exact component = {Newsdetail}></Route>
                    <Route path = '/main/home/video' exact component={Video}></Route>
                    <Route path = '/main/home/video/detail' exact component={Videodetail}></Route>
                    <Route path = '/main/home/people' exact component={People}></Route>
                    <Route path = '/main/home/people/:id'  exact component={Peopledetail}></Route>
                    <Route path = '/main/home/people_news' exact component={Peoplenews}></Route>
                    <Route path = '/main/home/search/:keyword' component={Search}></Route>
                   
                    
                    {/* 谁都没匹配到时，走redirect */}
                    <Redirect to='/main/home/news'/>
                    {/* </Suspense> */}
                   
                </Switch>
            </div>
        );
    
}
 
export default home;